<!DOCTYPE html>
<html>
    <head>
        <script src="../js/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <p>总价格：{{totalprice}}</p>
            <p>原价：{{price}}</p>
            <p>现价：{{price2}}</p>
            <p>数量：{{number}}</p>
            <div>改变数量：
                <button @click="number==0?0:number=number-100">-100</button>
                <button @click="number==0?0:number=number-10">-10</button>
                <button @click="number==0?0:number--">-1</button>
                <button @click="number++">+1</button>
                <button @click="number=number+10">+10</button>
                <button @click="number=number+100">+100</button>
            </div>
            <div>改变单价：
                <button @click="price==0?0:price=price-100">-100</button>
                <button @click="price==0?0:price=price-10">-10</button>
                <button @click="price==0?0:price--">-1</button>
                <button @click="price++">+1</button>
                <button @click="price=price+10">+10</button>
                <button @click="price=price+100">+100</button>
            </div>
            <div>
                折扣：
                <button @click="price2=price*0.1">一折</button>
                <button @click="price2=price*0.2">二折</button>
                <button @click="price2=price*0.3">三折</button>
                <button @click="price2=price*0.4">四折</button>
                <button @click="price2=price*0.5">五折</button>
                <button @click="price2=price*0.6">六折</button>
                <button @click="price2=price*0.7">七折</button>
                <button @click="price2=price*0.8">八折</button>
                <button @click="price2=price*0.9">九折</button>
                <button @click="price2=price">原价</button>
            </div>
        </div>
        <script>
            var vm = new Vue({
                el:'#app',
                data:{
                    price:20,
                    price2:20,
                    number:0
                },
                computed:{
                    totalprice(){
                        return this.price * this.number;
                    }
                }
            });
        </script>
    </body>
</html>